<template>
  <div>
    <el-dialog
        title="车辆配载"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :before-close="handleClose"
        width="90%"
    >
      <div>
        <el-form label-position="top" label-width="80px" :model="formLabelAlign" size="mini">
          <el-form-item label="运单号:">
            <el-input v-model="formLabelAlign.inquiry"></el-input>
          </el-form-item>
          <el-form-item label="预计到达时间:" class="time">
            <el-button @click="handleShowTime">{{formLabelAlign.arrive === '' ? '请选择预计到达时间':formLabelAlign.arrive}}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <span v-if="!showTime" slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleOk">提 交</el-button>
      </span>
      <div class="select">
        <van-datetime-picker
            v-if="showTime"
            v-model="currentDate"
            type="datetime"
            title="预计到达时间"
            @cancel="handleCancel"
            @confirm="handleTime"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { formatTime } from "@/assets/js/common";

export default {
  // 组件属性、变量
  props: {},
  // 变量
  data() {
    return {
      dialogVisible: true,
      formLabelAlign: {
        arrive: '',
        inquiry: ''
      },
      currentDate: new Date(),
      showTime: false
    }
  },
  // 使用其他组件
  components: {},
  // 方法
  methods: {
    handleClose() {
      this.$emit('handleClose')
    },
    handleOk() {
      if (this.formLabelAlign.inquiry === '') return this.$msg.fail('运单号不能为空')
      if (this.formLabelAlign.arrive === '') return this.$msg.fail('请选择预计到达时间')
      console.log(this.formLabelAlign)
    },
    handleShowTime() {
      this.showTime = !this.showTime
    },
    handleCancel() {
      this.showTime = false
    },
    handleTime(value) {
      this.formLabelAlign.arrive = formatTime(value)
      this.showTime = false
    }
  },
  // 生命周期函数
  created() {
  }
}
</script>

<style scoped src="../../../assets/css/transport/addVehicle.css">
</style>
